<template>
  <div>
    <div class="mt-30 mb-20">
      <b class="blue-line">{{ $t('other.unCountDate') }}</b>
    </div> 
    <a-row class="border">
      <a-col :span="9"> 
        <a-date-picker :open="open" v-model:value="selectVal" :showToday="false" @change="onSelect"  valueFormat="YYYY-MM-DD" class="uncount-data-pick" dropdownClassName="uncount-data-pick-dropdown" :getPopupContainer=" (trigger) => trigger.parentNode">
          <template #dateRender="{ current }" >  
            <div style="width: '100%'; height: '100%"  >
              <span :style="{ borderWidth: '1px', borderStyle: 'solid', borderRadius: '2px' ,display: 'inline-block' ,width: '24px', height: '24px', textAlign: 'center', color: getColor(current), background: getBgColor(current), borderColor: getBorColor(current)}" >
                {{ current.format('D') }} 
              </span>
            </div>  
          </template>
        </a-date-picker>
      </a-col>
      <a-col :span="15" >
        <div  class="uncount-data-right">
          <a-row class="pb-20">
            <a-col :span="12">{{ $t('other.selectInDate') }}</a-col>
            <a-col :span="12" class="text-right ">
              <span class="text-tip hover-pointer" @click="clearAll">{{ $t('other.clear') }}</span>
            </a-col>
          </a-row>
          <div class="bottom-box">
            <a-tag closable v-for="item in selectDateList" :key="item" @close="closeTag(item)" class="ft-size14 mb-10 tag-date-close">{{item}}</a-tag>
          </div> 
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script setup> 
import {onMounted, ref, watch} from 'vue'
import dayjs from 'dayjs'  
  let props = defineProps({
    info: {
      type: Array,
      default: () => []
    }
  })
  let open = ref(false)
  let selectVal = ref()
  let selectDateList = ref([]) 
  const onSelect = (value) => { 
    selectVal.value = value
    if(!selectDateList.value.includes(value) && value) selectDateList.value.push(value)   
  }
  const closeTag = (timeVal) => { 
    selectVal.value = null
    selectDateList.value = selectDateList.value.filter(i => i != timeVal) 
  } 
  const getColor = (current) => { 
    let color = ''
    if(selectDateList.value.includes(current.format('YYYY-MM-DD'))) color='#333'
    if(selectVal.value == current.format('YYYY-MM-DD')) color='#fff'
    return color
  }
  const getBgColor = (current) => { 
    let color = 'transparent' 
    if(selectDateList.value.includes(current.format('YYYY-MM-DD'))) color='#BAD1FF'
    if(selectVal.value == current.format('YYYY-MM-DD')) color='#3E8FF7'
    return color
  }
  const getBorColor = (current) => { 
    let color = 'transparent'
    if(dayjs(new Date()).format('YYYY-MM-DD') == current.format('YYYY-MM-DD')) color = '#3E8FF7'
    if(selectDateList.value.includes(current.format('YYYY-MM-DD'))) color='#BAD1FF'
    if(selectVal.value == current.format('YYYY-MM-DD')) color='#3E8FF7'
    return color
  }
  const clearAll = () => {
    selectVal.value = null
    selectDateList.value = []
  }
  watch(() => props.info, (val) => {
    selectDateList.value = val || []
  }, { deep: true, immediate: true })
  onMounted(()=> {
    open.value = true
  })
  defineExpose({
    selectDateList
  })
</script>
